<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #daceng {
            width: 500px;
            margin-left: 130px;

        }
    </style>
    <script src="js/jquery-1.8.3.js" type="text/javascript"></script>
</head>
<body>
请输入搜索关键字:
<input type="text" size="50" id="txtSearch" autocomplete="off"><input type="submit"
                                                                               value="搜一下">
<div id="daceng" style="border:1px solid ;display:none"></div>
<script>
    function jingguo(obj) {
        obj.style.backgroundColor = "lightblue";
        obj.style.cursor = "pointer";
    }

    function likai(obj) {
        obj.style.backgroundColor = "";
    }

    function xuanzhong(obj) {
        document.getElementById("txtSearch").value = obj.innerHTML;
        document.getElementById("daceng").style.display = "none";
    }


    $(function () {
        $("#txtSearch").keyup(
            function () {
                var keyword = $("#txtSearch").val();

                if (keyword != "") {
                    $.post(
                        "SearchNewsByKeyword",
                        {
                            keyword: $("#txtSearch").val()
                        },
                        callback
                    );
                } else {
                    $("#daceng").css("display", "none");
                }
            }
        );


        function callback(data) {
            var $daceng = $("#daceng");
            $daceng.html("");
            var str = data.split(",");
            var xiaoceng = "";

            if (str.length > 0) {
                for (var i = 0; i < str.length; i++) {
                    xiaoceng += "<div onmouseover='jingguo(this)' onmouseout='likai(this)' onclick='xuanzhong(this)'>";
                    xiaoceng += str[i];
                    xiaoceng += "</div>";
                }
                $daceng.html(xiaoceng).css("display","block");
            } else {
                $daceng.css("display","none");
            }
        }


    });


</script>
</body>
</html>